<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>页面加载事件</title>
		<!-- <script></script> -->
	</head>
	<body>
		<script>
			/* window.onload = function(){
				var btn = document.querySelector('button');
				btn.addEventListener('click',function(){
					alert('我被点击了');
				})
			}
			
			window.onload = function(){
				var btn = document.querySelector('button');
				btn.addEventListener('click',function(){
					alert('111111');
				})
			}
			 */
			/* window.addEventListener('load',function(){
				var btn = document.querySelector('button');
				btn.addEventListener('click',function(){
					alert('111111');
				})
				
			})
			
			window.addEventListener('load',function(){
				var btn = document.querySelector('button');
				btn.addEventListener('click',function(){
					alert('222222');
				})
				
			})
			 */
			// 凡是用load或者是onload都是等待页面全部加载完成js代码才会执行
			// DOMContentLoaded就是解决页面加载的问题
			// DOMContentLoaded 不等待页面全部加载完成才执行
			// 不包含图片，css 就可以执行，加载速度要比load更快
			window.document.addEventListener('DOMContentLoaded',function(){
				var btn = document.querySelector('button');
				btn.addEventListener('click',function(){
					alert('33333');
				})
			})
			
			
		</script>
		<button>点击我</button>
		
	</body>
</html>